<template>
  <div class="page-container">
    <el-card class="settings-card">
      <template #header>
        <div class="card-header">
          <h2>系统设置</h2>
        </div>
      </template>
      
      <el-divider content-position="left">数据库维护</el-divider>
      
      <div class="settings-section">
        <div class="section-title">事件数据更新</div>
        <div class="section-content">
          <p class="section-description">
            将自定义节点的事件引用从节点层级移动到版本层级，这样可以方便查看哪些版本被哪些事件引用。
            执行此操作将遍历所有事件并更新其数据结构。
          </p>
          <div class="action-buttons">
            <el-button 
              type="primary" 
              :loading="updating" 
              @click="updateEventsSchema"
            >
              开始更新事件架构
            </el-button>
          </div>
          <div v-if="updateResult" class="update-result">
            <el-alert
              :title="`更新完成：${updateResult.message}`"
              :type="updateResult.success ? 'success' : 'error'"
              show-icon
            />
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useStore } from 'vuex'
import { ElMessage } from 'element-plus'

const store = useStore()
const updating = ref(false)
const updateResult = ref(null)

// 更新事件架构
const updateEventsSchema = async () => {
  try {
    updating.value = true
    updateResult.value = null
    
    const result = await store.dispatch('updateEventsSchema')
    
    updateResult.value = result
    
    if (result.success) {
      ElMessage.success(result.message)
    } else {
      ElMessage.error(result.message || '更新失败')
    }
  } catch (error) {
    ElMessage.error('更新事件架构失败')
    updateResult.value = {
      success: false,
      message: error.message || '未知错误'
    }
  } finally {
    updating.value = false
  }
}
</script>

<style scoped>
.page-container {
  padding: 20px;
}

.settings-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.settings-section {
  margin-bottom: 30px;
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #303133;
}

.section-description {
  color: #606266;
  margin-bottom: 15px;
  line-height: 1.6;
}

.action-buttons {
  margin-bottom: 15px;
}

.update-result {
  margin-top: 15px;
}
</style> 